

var popup = {};

/**
 * [description]
 * options {[Object]} title, val,sureBtnR,cancelBtnR,closeIconR, sureText,cancelText,sureCb,cancelCb
 * @param  {[String]}   title    [标题]
 * @param  {[type]}   val      [内容]
 * @return {[type]}            [description]
 */
const pre = 'popup-';
const bodyCssOri = {'overflow-y':'auto'};
const bodyCss = {'overflow-y':'hidden','height':'100%'};
popup.alert = function (options) {
  $(`${pre}closeModal.alert`).eq(0).remove();
  let alertHtml = `<div class='${pre}closeModal alert'>
                <div class='alertmsgcover'></div>
                <div class='alertmsgbody'>
                  <div class='alertmsgtxt' style='cursor:default;'>
                    <h2>${options.title}<a class='icon-close'> x </a></h2>
                    <div>${options.val}</div>
                  </div>
                  <div class='alertmsgbtn'>
                    <div class='alertmsgcancel'>${options.cancelText?options.cancelText:'取消'}</div>
                    <div class='alertmsgensure'>${options.sureText?options.sureText:'确定'}</div>
                  </div>
                </div>
              </div>`;
  var alert = `.${pre}closeModal.alert`;
  $(document.body).css(bodyCss).append(alertHtml)
  $('.alertmsgbody').addClass('animate');
  $(alert).fadeIn();
  //不需要title
  if(options.title==undefined||!options.title) remove('.alertmsgtxt h2');
  if(options.cancelBtnR)remove('.alertmsgcancel');
  if(options.sureBtnR)remove('.alertmsgensure');
  if(options.closeIconR)remove('.icon-close');
  var elCancel = `${alert} .alertmsgcancel`,
      elSure = `${alert} .alertmsgensure`,
      elClose = `${alert} .icon-close`;
  $('body').off('click',elCancel).on('click',elCancel,function () {
     options.cancelCb&&options.cancelCb();
     isShow(elCancel)?closeModal(`${alert}:eq(0)`,200):closeModal();
     $(document.body).css(bodyCssOri);
  })
  $('body').off('click',elSure).on('click',elSure,function (){
     if( options.sureCb) options.sureCb();return false;
     isShow(elSure) ? closeModal(`${alert}:eq(0)`,200) : closeModal();
     $(document.body).css(bodyCssOri);
  })
  $('body').on('click',elClose,function () {
    isShow(elClose) ? closeModal(`${alert}:eq(0)`,200) : closeModal();
    $(document.body).css(bodyCssOri);
  })
  setTimeout(function () {
    resize(`${alert} .alertmsgbody`);
  },10)

};

/**
 * [description]
 * @param  {[type]} content [description]
 * @param  {[type]} time    [description]
 * @return {[type]}         [description]
 */
let timeout = null;
popup.tips = function (content,time) {
  clearTimeout(timeout);
  let tipsHtml = `<div class='${pre}closeModal tips'>
                    <div class='tipsBody'>
                      <p>${content}</p>
                    </div>
                  </div>`;
  if(isShow(`.${pre}closeModal.tips`)){
    closeModal(`.${pre}closeModal.tips`);
  }
  $(document.body).css(bodyCss).append(tipsHtml);
  $('.tipsBody').addClass('animate');
  resize(`.tipsBody`);
  if(time){
    timeout = setTimeout(function(){
      $(`.${pre}closeModal.tips`).fadeOut(300,function () {
         remove(this);
         $(document.body).css(bodyCssOri);
      })
    },time)
  }
}

popup.closeModal = closeModal;
popup.resize = resize;

/**
 * 移除类
 * @param  {[type]} el [description]
 * @param  {[type]} time      [description]
 * @return {[type]}           [description]
 */
function remove(el,time){
  if(time){
    return $(el).fadeOut(time,function(){
       $(this).remove();
    })
  }
  return $(el).remove();
}

/**
 * 自动居中层
 * @param  {[type]} el [description]
 * @return {[type]}    [description]
 */
function resize(el) {
  var el = el || `${pre}closeModal`;
  let winWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
      winHeight = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
  let layerWidth = $(el).width(),
      layerHeight = $(el).height();
  $(el).css({
     'position':'fixed',
     'top':(winHeight-layerHeight)/2,
     'left':(winWidth-layerWidth)/2
  });
}

/**
 * 判断是否显示
 * @param  {[type]}  el [description]
 * @return {Boolean}    [description]
 */
function isShow(el){
  return $(el).is(":visible");
}

/**
 * 关闭弹出层
 * @param  {[type]} el   [description]
 * @param  {[type]} time [description]
 * @return {[type]}      [description]
 */
function closeModal(el,time){
  var el = el || `${pre}closeModal`;
  if(isShow('.alertmsgbody')){
     $('.alertmsgbody').toggleClass('animate removeanimate').removeClass('removeanimate').addClass('animate');
  }
  if(time) return remove(el,time);
  return remove(el);
}


$(window).resize(function() {
   resize(`.alertmsgbody`);
   resize(`.tipsBody`);
});
